<template>
	<el-row :gutter="20">
		<el-col :xl="12" :lg="24">
			<div :id="chartsId" class="my-chart"></div>
		</el-col>
		<el-col :xl="12" :lg="24">
			<div id="chartsIdlt1" class="my-chart"></div>
		</el-col>
	</el-row>
</template>
<style lang="scss" scoped>
  .my-chart{
    margin-top: 50px;
    width: 800px;
    height: 500px;
    box-shadow: 0px 0px 2px 4px #ccc,-0px -0px 2px 4px #ccc;
  }
</style>
<script>
export default {
  props: ['chartsId', 'data', 'keyName'],
  data(){
    return {
      }
  },
  watch: {
    data(){
      this.desc();
    }
  },
  mounted(){
    this.desc();
  },
  methods: {
    handleClick(tab, event) {
    },
    desc(){
      let car, mpv, suv = [];//柱状图数据
      let lineData;//折线图数据
      if(this.data.sumYearSalesMY){  //判断是否有车身结构数据
        let myDataLine = this.data.sumYearSalesQ;
        car = myDataLine.CAR_monthSalesQ;
        mpv = myDataLine.MPV_monthSalesQ;
        suv = myDataLine.SUV_monthSalesQ;
        //加载line数据
        lineData = this.data.sumYearSalesMY;
      }
      let myChart5 = this.$echarts.init(document.getElementById(this.chartsId));
      let myChartlt1 = this.$echarts.init(document.getElementById('chartsIdlt1'));
      myChart5.setOption({
            title: {
                text: this.keyName
            },
            tooltip: {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['CAR', 'MPV', 'SUV']
            },
            dataZoom: [
              {
                type: 'slider',
                show: true, 
                height: 30, 
                filterMode: 'empty',
                xAxisIndex: [
                    0
                ], 
                bottom:20,
                startValue: car.length-12,
                endValue:car.length
              },
              {
                type: 'inside', 
                show: true, 
                height: 15, 
                filterMode: 'empty',
                xAxisIndex: [
                    0
                ], 
                startValue: car.length-12,
                endValue:car.length
              }
            ], 
            grid: {
                bottom: 100,
            },
            xAxis: {
                type: 'category',
                data: function(){
                    let list = [];
                    let year = new Date('2017-12').getFullYear();//当前年
                    let month = new Date('2017-12').getMonth()+1;//当前月
                    //生成x轴坐标
                    list.unshift(year + '-' + month);
                    for(let i = 1; i < 24; i++){
                      if((month-1)%12 == 0) --year;
                      month = Math.abs((month-1) % 12);
                      
                      if(month == 0) month = 12;
                      let item = year + '-' + month;
                      list.unshift(item);
                    }
                    return list;
                }(),
                axisLabel: {
                  interval: 0,
                  rotate: -30
                }
            },
            
            yAxis: {
                type: 'value',
                max: 100,
                min: 0,
                axisLabel: {
                  formatter: '{value} %'
                }
            },
            series: [
                {
                  name:'CAR',
                  type:'bar',
                  stack: '总量',
                  barWidth: 20,
                  data:car
                },
                {
                  name:'MPV',
                  type:'bar',
                  barWidth: 20,
                  stack: '总量',
                  data:mpv
                },
                {
                  name:'SUV',
                  type:'bar',
                  barWidth: 20,
                  stack: '总量',
                  data:suv
                }
            ]
        });
        myChartlt1.setOption({
          title: {
            text:'车身类型同、环比变化图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['CAR_MOM', 'CAR_YOY', 'MPV_MOM', 'MPV_YOY', 'SUV_MOM', 'SUV_YOY'],
            top: 30
          },
          dataZoom: [
            {
                type: 'slider',
                show: true, 
                height: 30, 
                filterMode: 'empty',
                xAxisIndex: [
                    0
                ], 
                bottom:20,
                startValue: car.length-12,
                endValue:car.length
              },
              {
                type: 'inside', 
                show: true, 
                height: 15, 
                filterMode: 'empty',
                xAxisIndex: [
                    0
                ], 
                startValue: car.length-12,
                endValue:length
              }
          ],
          grid: {
            bottom: 100
          },
          xAxis: {
            type: 'category',
            data: function(){
                let list = [];
                let year = new Date('2017-12').getFullYear();//当前年
                let month = new Date('2017-12').getMonth()+1;//当前月
                //生成x轴坐标
                list.unshift(year + '-' + month);
                for(let i = 1; i < 24; i++){
                  if((month-1)%12 == 0) --year;
                  month = Math.abs((month-1) % 12);
                  
                  if(month == 0) month = 12;
                  let item = year + '-' + month;
                  list.unshift(item);
                }
                return list;
            }(),
            axisLabel: {
              interval: 0,
              rotate: -30
            }
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value} %'
              }
          },
          series: [
            {
              name:'CAR_MOM',
              type:'line',
              stack: '总量0',
              data: lineData.CAR_MOM,
            },
            {
              name:'CAR_YOY',
              type:'line',
              stack: '总量1',
              data:lineData.CAR_YOY
            },
            {
              name:'MPV_MOM',
              type:'line',
              stack: '总量2',
              data:lineData.MPV_MOM
            },
            {
              name:'MPV_YOY',
              type:'line',
              stack: '总量3',
              data:lineData.MPV_YOY
            },
            {
              name:'SUV_MOM',
              type:'line',
              stack: '总量4',
              data:lineData.SUV_MOM
            },
            {
              name:'SUV_YOY',
              type:'line',
              stack: '总量5',
              data:lineData.SUV_YOY
            }
          ]
        })

    }
  }
}
</script>
